import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
import { styleModule } from 'snabbdom/build/package/modules/style'
import { attributesModule } from 'snabbdom/build/package/modules/attributes'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

let patch = init([attributesModule, eventListenersModule, styleModule])
let objectArraySort = function (keyName) {
    return function (objectN, objectM) {
     var valueN = objectN[keyName]
     var valueM = objectM[keyName]
     if (valueN < valueM) return 1
     else if (valueN > valueM) return -1
     else return 0
    }
   }
const sortArr = [
  h(
    'span',
    { style: { color: 'gray', marginLeft: '5px', cursor: 'pointer' },on:{click:function(){
        data.sort(objectArraySort('rank'))
        oldVnode = patch(oldVnode, createPage())
    }} },
    'Rank'
  ),
  h(
    'span',
    { style: { color: 'gray', marginLeft: '5px', cursor: 'pointer' },on:{click:function(){
        data.sort(objectArraySort('title'))
        oldVnode = patch(oldVnode, createPage())
    }} },
    'Title'
  ),
  h(
    'span',
    { style: { color: 'gray', marginLeft: '5px', cursor: 'pointer' } ,on:{click:function(){
        data.sort(objectArraySort('description'))
        oldVnode = patch(oldVnode, createPage())
    }}},
    'Description'
  ),
]
const singleData = {
    rank: 8,
    title: '搏击俱乐部',
    description:
      '好看there is description,there is description,there is description',
  }
let data = [
  {
    rank: 7,
    title: 'the good the bad and ugly',
    description:
      '好人坏人和仇人什么玩意erthere is description,there is description,there is description',
  },
  {
    rank: 9,
    title: '12怒汉',
    description:
      '挺好看there is description,there is description,there is description',
  },
  {
    rank: 8,
    title: '搏击俱乐部',
    description:
      '好看there is description,there is description,there is description',
  },
]
let oldVnode = null
function createh(data, event) {
  let listEl = []
  let dataArr = data
  dataArr.map((item, index) => {
    console.log(index)
    listEl.push(
      h('li', { style: { listStyle: 'none', margin: '5px' } }, [
        h(
          'span',
          { style: { width: '20px', display: 'inline-block' } },
          item.rank
        ),
        h(
          'span',
          { style: { width: '220px', display: 'inline-block' } },
          item.title
        ),
        h(
          'span',
          { style: { width: '800px', display: 'inline-block' } },
          item.description
        ),
        h(
          'span',
          {
            style: { cursor: 'pointer' },
            key: index,
            on: {
              click: function () {
                data.splice(this.key, 1)
                oldVnode = patch(oldVnode, createPage())
              },
            },
          },
          'x'
        ),
      ])
    )
  })
  return listEl
}
function createPage() {
  let vnode = h(
    'div',
    { style: { backgroundColor: 'black', width: '100%', height: '100%' } },
    [
      h('h2', { style: { color: 'white' } }, 'Top 10 Movies'),
      h('p', [
        h('span', { style: { color: 'white' } }, 'sort by'),
        ...sortArr,
        h('span', { style: { color: 'gray', marginLeft: '800px' }, on:{click:function(){
            data.push(singleData)
            oldVnode = patch(oldVnode, createPage())
        }} }, 'Add'),
      ]),
      h('ul', { style: { color: 'white' } }, createh(data)),
    ]
  )
  return vnode
}

let app = document.querySelector('#app')
// 首次渲染
oldVnode = patch(app, createPage())
